<template>
  <div id='eqTypeStat' ref="eqTypeStat"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'eqTypeStat',
  components: {},
  data() {
    return {};
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  beforeCreate() {},
  beforeMount() {},
  methods: {
    init() {
      let dom = echarts.init(this.$refs.eqTypeStat);
      let option = {
        tooltip: {
          trigger: 'item',
          // renderMode: 'richText',
          confine: true,
          // formatter: '{b}:{c}{d}',
          backgroundColor: '#fff',
          textStyle: {
            color: 'rgba(0,0,0,1)',
          },
          extraCssText: 'box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);',
        },
        color: [
          'rgba(82, 196, 26, 1)',
          'rgba(250, 219, 20, 1)',
          'rgba(24, 144, 255, 1)',
          'rgba(250, 173, 20, 1)',
        ],
        legend: {
          bottom: '5%',
          left: 'center',
        },
        series: [
          {
            name: '设备型号',
            type: 'pie',
            radius: ['0%', '60%'],
            center: ['50%', '35%'],
            startAngle: '120',
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
            },

            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: '预警终端1' },
              { value: 735, name: '烈度仪1' },
              { value: 580, name: '预警终端2' },
              { value: 484, name: '烈度仪2' },
            ],
          },
        ],
      };
      dom.setOption(option);
      addEventListener('resize', () => {
        dom.resize();
      });
    },
  },
};
</script>
<style lang='scss' scoped>
#eqTypeStat {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>